<template>
    <div id="shop_container">
        <!-- 上面模块 -->
        <div>
            <header>
                <section @click="$router.go(-1)" class="goback">
                    <span>&lt;</span>
                </section>
            </header>
            <nav class="nav">
                <div>
                    <img src="https://fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg" alt="商家图">
                </div>
                <div class="nav_info">
                    <h4>标题</h4>
                    <p class="ellipsis">商家配送／分钟送达／配送费¥5</p>
                    <p class="ellipsis">公告：欢迎光临，用餐高峰请提前下单，谢谢</p>
                </div>
            </nav>
        </div>
        <!-- 下面模块 -->
        <div>
            <ul class="menu_title">
                <li :class="{active_show: changeShowType    =='food'}" @click="changeShowType='food'">商品</li>
                <li :class="{active_show: changeShowType =='rating'}" @click="changeShowType='rating'">评价</li>
                <li :class="{active_show: changeShowType =='boss'}" @click="changeShowType='boss'">商家</li>
            </ul>
            <!-- 商品 -->
            <section v-show="changeShowType == 'food'" class="food_box">
                <ul class="food_left">
                    <li :class="{active_left:true}">热销榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                    <li>热销榜</li>
                    <li>折扣榜</li>
                </ul>
                <div class="food_right">
                    <div class="food_right_item">
                        <h3>热销榜<span>热销来袭~</span></h3>
                        <ul>
                            <li>
                                <div class="food_img"><img src="https://fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg" alt="产品图"></div>
                                <div class="foot_item_info">
                                    <h4>阿斯顿</h4>
                                    <p>本商品配有米饭，主要原料：罗非鱼，辣椒，青菜</p>
                                    <p>月售：125份 好评：100%</p>
                                    <div class="foodAdd">
                                        <span>￥</span><span>20</span><em>起</em>
                                        <div><span class="removefood">-</span><span class="addfood">1</span><span class="addfood">+</span></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 评价 -->
            <section  v-show="changeShowType == 'rating'" class="rating_box">
                评价评价
            </section>
            
            <!-- 商家 -->
            <section  v-show="changeShowType == 'boss'" class="boss_box">
                商家信息商家信息
            </section>
        </div>

        
    </div>
</template>

<script>
    export default {
        data(){
            return {
                changeShowType:'food',  //默认显示商品
            }
            
        },
        created(){
        }
    }

</script>

<style scoped lang="scss">
    @import 'src/style/mixin';
    #shop_container{
        height: 100vh;
        overflow: hidden;
    }
    .nav{
        display:flex;
        padding:5px;
        background: #fff;
        border-bottom: 1px solid #ccc;
        img{
            width: 2.9rem;
            height: 2.9rem;
            margin-right:5px;
        }
        .nav_info{
            flex:1;
            p{
                padding-top:5px;
                font-size: .5rem;
                width: calc(100vw - 3.5rem);
            }
        }
    }
    .menu_title{
        display:flex;
        font-size: .75rem;
        background: #fff;
        padding:.5rem; 
        li{
            margin:0 .5rem;
        }
        .active_show{
            color:#3190e8;
            border-bottom: 2px solid;
            box-sizing: border-box;
        }
    }
    .food_box{
        display:flex;
        .food_left{
            width: 3.8rem;
            font-size: .75rem;
            li{
                padding:.7rem .3rem;
            }
            .active_left{
                border-left:2px solid #3190e8;
                background:#fff;
            }
        }
        .food_right{
            flex:1;
            .food_right_item{
                h3{
                    font-size: .875rem;
                    padding: 10px;
                    box-sizing: border-box;
                    span{
                        font-size: .5rem;
                        padding-left: 5px;
                    }
                }
                .food_img img{
                    width:2rem;
                    height:2rem;
                    margin-right:5px;
                }
                li{
                    display:flex;
                    padding: 10px;
                    background:#fff;
                    .foot_item_info{
                        flex:1;
                        p{
                            font-size: .5rem;
                            
                        }
                        .foodAdd{
                            span{
                                color:red;
                                font-weight: bold;
                            }
                            em{
                                font-style: normal;
                                padding-left: 5px;
                            }
                            div{
                                display:inline-block;
                                float:right;
                                span{
                                    color:#000;
                                }
                            }
                        }
                    }
                }
                
            }
        }
    }
    
    
    
</style>